<template>
  <div class="camera-page">
    <!-- 导航栏 -->
    <NavBar2 />

    <!-- 内容区域 -->
    <div class="content">
      <!-- 左边设备信息 -->
      <div class="left-container">
        <dv-border-box8 class="device-box">
          <div class="device-header">设备信息</div>
          <div class="device-list">
            <div
                v-for="(device, index) in deviceList"
                :key="index"
                class="device-item"
            >
              <dv-border-box1 class="device-item-box">
                <div class="device-name">{{ device.deviceName }}</div>
                <div class="device-info">
                  <div>设备ID: {{ device.deviceId }}</div>
                  <div>序列号: {{ device.serialNumber }}</div>
                  <div>类型: {{ device.category }}</div>
                  <div>单位: {{ device.unit }}</div>
                  <div>创建时间: {{ formatDate(device.createdTime) }}</div>
                </div>
              </dv-border-box1>
            </div>
          </div>
        </dv-border-box8>
      </div>

      <!-- 右边监控轮播图和历史记录 -->
      <div class="right-container">
        <!-- 轮播图展示监控图片 -->
        <div class="carousel-container">
          <dv-border-box10 class="carousel-box">
            <el-carousel ref="carouselRef" :interval="2000" arrow="always" height="500px">
              <el-carousel-item v-for="(image, index) in imageList" :key="index">
                <img :src="`data:image/jpeg;base64,${image.img}`" alt="监控图片" class="carousel-image" />
                <div class="image-info">
                  <div>设备ID: {{ image.deviceId }}</div>
                  <div>拍摄时间: {{ image.createdTime }}</div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </dv-border-box10>
        </div>

        <!-- 历史记录 -->
        <div class="history-container">
          <dv-border-box8 class="history-box">
            <div class="history-header">历史记录</div>
            <div class="history-list">
              <div
                  v-for="(image, index) in imageList"
                  :key="index"
                  class="history-item"
                  :class="{ active: activeIndex === index }"
                  @click="switchImage(index)"
              >
                <img :src="`data:image/jpeg;base64,${image.img}`" alt="历史图片" class="history-image" />
                <div class="history-info">
                  <div>设备ID: {{ image.deviceId }}</div>
                  <div>拍摄时间: {{ image.createdTime }}</div>
                </div>
              </div>
            </div>
          </dv-border-box8>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import request from '@/utils/request';
import NavBar2 from '@/components/NavBar2.vue';
import { ElCarousel, ElCarouselItem } from 'element-plus';
import 'element-plus/es/components/carousel/style/css';

// 监控图片数据
interface CameraImage {
  deviceId: string;
  img: string; // base64 编码的图片数据
  createdTime: string; // 拍摄时间
}

// 设备信息数据
interface DeviceInfo {
  deviceId: number;
  deviceName: string;
  serialNumber: string;
  category: string;
  unit: string;
  monitorUrl: string | null;
  greenHouseId: number;
  createdTime: string;
}

// 大棚信息
const data = reactive({
  greenHouseInfo: {
    houseId: 0,
    houseName: "",
    address: "",
    area: 0,
    createdTime: "",
    deviceCount: 0,
  },
});

// 图片列表
const imageList = ref<CameraImage[]>([]);

// 设备列表
const deviceList = ref<DeviceInfo[]>([]);

// 当前激活的图片索引
const activeIndex = ref(0);

// 获取 el-carousel 实例
const carouselRef = ref<InstanceType<typeof ElCarousel>>();

// 获取监控图片数据
const fetchCameraImages = () => {
  request.get('/Camera/all').then(res => {
    if (res.code === 1) {
      imageList.value = res.data;
    } else {
      console.error('获取监控图片失败:', res.msg);
    }
  }).catch(error => {
    console.error('请求失败:', error);
  });
};

// 获取设备信息
const fetchDeviceInfo = () => {
  request.get('/Device/getInfoByGreenHouseId', {
    params: {
      greenHouseId: data.greenHouseInfo.houseId, // 使用大棚ID查询设备信息
    },
  }).then(res => {
    if (res.code === 1) {
      deviceList.value = res.data; // 存储设备信息
    } else {
      console.error('获取设备信息失败:', res.msg);
    }
  }).catch(error => {
    console.error('请求失败:', error);
  });
};

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString);
  return date.toLocaleString(); // 根据需要调整日期格式
};

// 切换到指定图片
const switchImage = (index: number) => {
  activeIndex.value = index;
  // 手动切换轮播图到指定索引
  carouselRef.value?.setActiveItem(index);
};

// 组件加载时获取数据
onMounted(() => {
  getInfoAll(); // 获取大棚信息
  fetchCameraImages(); // 获取监控图片
});

// 获取大棚信息
const getInfoAll = () => {
  request.get("/Greenhouse/getInfoAll").then(res => {
    if (res.code === 1) {
      data.greenHouseInfo = res.data[0];
      fetchDeviceInfo(); // 获取设备信息
    } else {
      console.error('获取大棚信息失败:', res.msg);
    }
  }).catch(error => {
    console.error('请求失败:', error);
  });
};
</script>

<style scoped>
.camera-page {
  width: 100%;
  height: 100vh;
  background: url('@/assets/背景3号.jpg') no-repeat center center;
  background-size: cover;
  color: #fff;
  overflow: hidden;
}

.content {
  display: flex;
  height: calc(100vh - 60px);
  padding: 20px;
  gap: 20px;
  box-sizing: border-box;
}

.left-container {
  flex: 1;
  max-width: 33.33%; /* 左边占1/3 */
}

.right-container {
  flex: 2;
  max-width: 66.66%; /* 右边占2/3 */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.device-box {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.device-header {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.device-list {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 15px; /* 设备之间的间距 */
}

.device-item {
  flex: 1 1 calc(50% - 10px); /* 每行显示两个设备，减去间距 */
  box-sizing: border-box;
}

.device-item-box {
  padding: 15px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  height: 100%; /* 确保高度一致 */
}

.device-name {
  font-size: 16px; /* 调整字体大小 */
  font-weight: bold;
  margin-bottom: 10px;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

.device-info {
  font-size: 12px; /* 调整字体大小 */
  color: #ccc;
}

.device-info div {
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

.carousel-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-box {
  width: 100%;
  height: 500px;
  border-radius: 8px;
  overflow: hidden;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-info {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
}

.history-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 调整为顶部对齐 */
  height: 300px; /* 固定高度 */
}

.history-box {
  width: 100%;
  height: 100%; /* 高度占满父容器 */
  border-radius: 8px;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
}

.history-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.history-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  height: calc(100% - 40px); /* 减去标题高度 */
  padding-bottom: 10px;
}

.history-item {
  flex: 0 0 150px;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  height: 100%;
}

.history-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.history-item.active {
  border: 2px solid #37a2da;
}

.history-image {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.history-info {
  padding: 10px;
  font-size: 12px;
  text-align: center;
}
</style>